<template>
  <view class="order-card" @click="$emit('click')">
    <!-- 订单头部 -->
    <view class="order-header">
      <text class="order-no">订单号: {{order.orderNo}}</text>
      <text class="order-status">{{getStatusText(order.status)}}</text>
    </view>
    
    <!-- 商品列表 -->
    <view class="product-list">
      <view 
        class="product-item"
        v-for="(product, index) in order.products"
        :key="index"
      >
        <image class="product-image" :src="product.image" mode="aspectFill" />
        <view class="product-info">
          <text class="product-name">{{product.name}}</text>
          <text class="product-spec">{{product.spec}}</text>
          <view class="price-line">
            <text class="product-price">¥{{product.price}}</text>
            <text class="product-quantity">×{{product.quantity}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 订单底部 -->
    <view class="order-footer">
      <text class="total-amount">共{{order.products.length}}件商品 合计: ¥{{order.totalAmount}}</text>
      
      <view class="action-buttons">
        <view 
          class="action-btn"
          v-for="action in getActions(order.status)"
          :key="action.text"
          :class="action.type"
          @click.stop="handleAction(action.type, order.id)"
        >
          {{action.text}}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  order: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['click'])

// 获取订单状态文本
const getStatusText = (status) => {
  const statusMap = {
    unpaid: '待付款',
    unsent: '待发货',
    shipped: '待收货',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

// 获取可操作按钮
const getActions = (status) => {
  const actions = {
    unpaid: [
      { text: '取消订单', type: 'cancel' },
      { text: '去支付', type: 'pay' }
    ],
    unsent: [
      { text: '申请退款', type: 'refund' }
    ],
    shipped: [
      { text: '查看物流', type: 'logistics' },
      { text: '确认收货', type: 'confirm' }
    ],
    completed: [
      { text: '删除订单', type: 'delete' },
      { text: '再次购买', type: 'rebuy' }
    ],
    cancelled: [
      { text: '删除订单', type: 'delete' },
      { text: '再次购买', type: 'rebuy' }
    ]
  }
  return actions[status] || []
}

// 处理按钮点击
const handleAction = (type, orderId) => {
  switch (type) {
    case 'pay':
      uni.navigateTo({
        url: `/pages/order/payment?id=${orderId}`
      })
      break
    case 'confirm':
      uni.showModal({
        title: '确认收货',
        content: '请确认您已收到商品',
        success: (res) => {
          if (res.confirm) {
            emit('confirm', orderId)
          }
        }
      })
      break
    // 其他操作处理...
    default:
      emit(type, orderId)
  }
}
</script>

<style lang="scss">
.order-card {
  background-color: $white-bg;;
  margin-bottom: 20rpx;
  padding: 0 30rpx;
  
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    .order-no {
      font-size: 26rpx;
      color: $text-color-666;
    }
    
    .order-status {
      font-size: 26rpx;
      color: $primary-color;
    }
  }
  
  .product-list {
    .product-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      .product-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      
      .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .product-name {
          font-size: $font-size-28rpx;
          @include text-ellipsis(2);
        }
        
        .product-spec {
          font-size: 24rpx;
          color: #999;
        }
        
        .price-line {
          display: flex;
          justify-content: space-between;
          
          .product-price {
            font-size: $font-size-28rpx;
            color: $primary-color;
          }
          
          .product-quantity {
            font-size: 26rpx;
            color: $text-color-666;
          }
        }
      }
    }
  }
  
  .order-footer {
    padding: 20rpx 0;
    text-align: right;
    
    .total-amount {
      font-size: $font-size-28rpx;
      color: $text-color;
      margin-bottom: 20rpx;
      display: inline-block;
    }
    
    .action-buttons {
      display: flex;
      justify-content: flex-end;
      
      .action-btn {
        margin-left: 20rpx;
        padding: 8rpx 24rpx;
        border: 1rpx solid #ccc;
        border-radius: 30rpx;
        font-size: 26rpx;
        
        &.pay {
          border-color: $primary-color;
          color: $primary-color;
        }
        
        &.cancel {
          border-color: #999;
          color: $text-color-666;
        }
        
        &.confirm {
          border-color: $primary-color;
          color: $primary-color;
        }
      }
    }
  }
}
</style>